<template>
     <view class="activity-wall-detail">  
        <headerVue :back="true" bgColor="transparent">
        </headerVue>
         <!-- 主图区域 -->
         <view class="main-image-section">
            <view class="type">{{ (detail.category && detail.category.name) ? detail.category.name : '' }}</view>
            <swiper 
                class="main-image-swiper"
                :indicator-dots="false"
                :duration="500"
                style="width:100%;height:552rpx;"
            >
                <swiper-item v-for="(img, idx) in detail.image_urls" :key="idx">
                    <image 
                        :src="img" 
                        mode="aspectFill" 
                        style="width: 100%; height: 552rpx; border-radius: 0;"
                    ></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="box-con">
            <!-- 标题与统计 -->
            <view class="title-card">
                <view class="activity-title">{{ detail.title || '' }}</view>
                <view class="meta-row">
                    <view class="meta-item">
                        <u-icon name="eye" size="28rpx" color="#999"></u-icon>
                        <text class="meta-text">{{ detail.view_count || 0 }}</text>
                    </view>
                    <view class="meta-item">
                        <u-icon name="heart" size="28rpx" color="#999"></u-icon>
                        <text class="meta-text">{{ detail.like_count || 0 }}</text>
                    </view>
                </view>
            </view>

            <!-- 基本信息 -->
            <view class="info-card">
                <view class="info-row">
                    <u-icon name="map" size="28rpx" color="#DF9824"></u-icon>
                    <text class="info-label">活动地址：</text>
                    <text class="info-value">{{ detail.address}}</text>
                </view>
                <view class="info-row">
                    <u-icon name="clock" size="28rpx" color="#DF9824"></u-icon>
                    <text class="info-label">活动时间：</text>
                    <text class="info-value">{{ detail.activity_time_text }}</text>
                </view>
                <view class="info-row">
                    <u-icon name="clock" size="28rpx" color="#DF9824"></u-icon>
                    <text class="info-label">报名时间：</text>
                    <text class="info-value">{{ detail.register_time_text }}</text>
                </view>
            </view>

            <!-- 活动详情图片模块 -->
            <view class="detail-section">
                <view class="section-title">活动详情</view>
                <view class="content">
                    <u-parse :content="detail.content" />
                </view>
            </view>
        </view>
        <footerVue>
            <view class="btn-box">
                <view class="btn-lr">
                    <view class="collected" @click="toggleFavorite(detail)">
                        <u-icon 
                            :name="detail.is_collected ? 'heart-fill' : 'heart'" 
                            :color="detail.is_collected ? '#ff4757' : '#333'"
                            size="45rpx"
                        />
                        <text>收藏</text>
                    </view>
                    <view class="share">
                        <span class="iconfont icon-fenxiang1"></span>
                        <text>分享</text>
                    </view>
                </view>
                <view class="btn-lt" :class="{ disabled: detail.register_status != '4', noClick: detail.is_registered }" @click="goToRegistration">
                    {{ detail.is_registered ? '已报名' : '立即报名' }}
                </view>
            </view>
        </footerVue>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue'
import footerVue from '@/components/fixed-footer/index.vue'
import { getCommunityactivityDetail, postCommunityactivityUncollect, postCommunityactivityCollect } from '@/api/index.js'
export default {
    components: { headerVue, footerVue },
    data() {
        return {
            detail:{}
        }
    },
    onLoad(option) {
        this.getCommunityactivityDetailEvent(option.id)
    },
    watch: {
        '$store.state.activitySync': {
            handler(sync) {
                if (!sync || !sync.id || !this.detail || !this.detail.id) return
                if (String(sync.id) !== String(this.detail.id)) return
                if (typeof sync.is_registered !== 'undefined') {
                    this.$set(this.detail, 'is_registered', !!sync.is_registered)
                }
                if (typeof sync.is_collected !== 'undefined') {
                    this.$set(this.detail, 'is_collected', !!sync.is_collected)
                }
            },
            immediate: true
        }
    },
    methods: {
        async getCommunityactivityDetailEvent(id) {
            const res = await getCommunityactivityDetail(id)
            res.data.activity_time_text = this.timeEvent(res.data.activity_time_text)
            res.data.register_time_text = this.timeEvent(res.data.register_time_text)
            this.detail = (res && res.data) ? res.data : {}
            // 首次进入详情时，用最新数据回写到store，便于返回后同步
            this.$store.commit('SET_ACTIVITY_SYNC', {
                id: this.detail.id,
                is_collected: this.detail.is_collected,
                is_registered: this.detail.is_registered,
                title: this.detail.title
            })
        },
        timeEvent(text) {
            const timeText = text
            const match = timeText.match(/(\d{4})-(\d{2})-(\d{2}) (\d{2}:\d{2})~(\d{4})-(\d{2})-(\d{2}) (\d{2}:\d{2})/)
            if (match) {
                // match: [0, y1, m1, d1, h1, y2, m2, d2, h2]
                const start = `${match[2]}/${match[3]} ${match[4]}`
                const end = `${match[6]}-${match[7]} ${match[8]}`
                return `${start} ~ ${end}`
            }
        },
         // 切换收藏状态
         async toggleFavorite(item) {
            
            // 这里应该调用收藏/取消收藏API
            if (item.is_collected) {
                await postCommunityactivityUncollect({
                    activity_id:item.id
                })
            } else {
                await postCommunityactivityCollect({
                    activity_id:item.id
                })
            }

            this.$set(this.detail, 'is_collected', !item.is_collected)
            // 将变更同步到store，供列表页 onShow 时更新
            this.$store.commit('SET_ACTIVITY_SYNC', {
                id: this.detail.id,
                is_collected: this.detail.is_collected,
                is_registered: this.detail.is_registered,
                title: this.detail.title
            })
        },
        goToRegistration() {
            uni.navigateTo({
                url: `/views/community/activity-registration?id=${this.detail.id}`
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.activity-wall-detail {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

    // 主图区域
.main-image-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 552rpx;
    z-index: 1;

    .type {
        z-index: 3;
        left: 48rpx;
        top: 188rpx;
        position: absolute;
        padding:8rpx 16rpx;
        color: #fff;
        font-size: 24rpx;
        background: rgba(0,0,0,0.2);
        border-radius: 60rpx 60rpx 60rpx 60rpx;
    }
}

.box-con {
    position: relative;
    z-index: 4;
    margin-top: 412rpx;
    background: #F6F6F6;
}

.title-card {
    padding: 20rpx;
    background: #fff;
}

.activity-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.meta-row {
    display: flex;
    align-items: center;
    margin-top: 8rpx;
}

.meta-item {
    display: flex;
    align-items: center;
    margin-right: 24rpx;
}

.meta-text {
    font-size: 24rpx;
    color: #999;
    margin-left: 6rpx;
}

.info-card {
    background: #fff;
    padding: 0 20rpx 28rpx;
}

.info-row {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
}

.info-label {
    font-size: 26rpx;
    color: #666;
    margin-left: 8rpx;
}

.info-value {
    font-size: 26rpx;
    color: #333;
}

.detail-section {
    padding:20rpx 32rpx;
    background: #fff;
    margin-top: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
}

.detail-image {
    width: 100%;
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
}

.detail-image:last-child {
    margin-bottom: 0;
}

.btn-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn-lr {
        display: flex;
        align-items: center;

        .collected,
        .share {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &.share {
                margin-left: 38rpx;
            }

            text {
                font-size: 24rpx;
                color: #333;
            }

            .iconfont {
                font-size: 45rpx;
            }
        }
    }

    .btn-lt {
        width: 474rpx;
        height: 76rpx;
        background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        font-size: 36rpx;
        color: #FFFFFF;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;

        &.disabled {
            pointer-events: none;
            background: #999;
            color: #fff;
        }

        &.noClick {
            pointer-events: none;
        }
    }
}
</style>